<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import SideBySide from "./SideBySide.svelte";
    import { Image } from "../Image";
    import img1 from "../../assets/before.jpeg";
    import img2 from "../../assets/after.jpeg";

    const { Story } = defineMeta({
        title: "Components/Views/SideBySide",
        component: SideBySide,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="width: 640px; height: 426px">
            <SideBySide>
                {#snippet left()}
                    <div style="background: green">
                        <Image src={img1} />
                    </div>
                {/snippet}
                {#snippet right()}
                    <div style="background: red">
                        <Image src={img2} />
                    </div>
                {/snippet}
            </SideBySide>
        </div>
    {/snippet}
</Story>
